<navbar></navbar>
<div class="main">
        
        <!--商家名-->
        <div class="page-header">
            <h1 style="text-align: center">{{vm.order.merchant.mname}}</h1>
        </div>
        
        <!--订单状态-->
        <div class="jumbotron">
            <div class="container" ng-switch="vm.order.ostate">
                <div ng-switch-when="0">
                    <h2>商家未接单</h2>
                    <p>请耐心等待商家接单</p>
                </div>
                <div ng-switch-when="1">
                    <h2>商家已接单</h2>
                    <p>订单即将配送</p>
                </div>
                <div ng-switch-when="2">
                    <h2>商家拒接</h2>
                    <p>很遗憾，因为一些原因，商家不能接您的订单</p>
                </div>
                <div ng-switch-when="3">
                    <h2>订单正在配送中</h2>
                    <p>您的外卖已经在路上了</p>
                </div>
                <div ng-switch-when="4">
                    <h2>订单已完成</h2>
                    <p>很高兴能为您提供本次服务</p>
                </div>
                <div ng-switch-when="5">
                    <h2>订单已取消</h2>
                    <p>您已取消订单，期望下次为您服务</p>
                </div>
            </div>
        </div>
        
        
        <!--订单详情-->
        <div>
            <!--收货地址-->
            <div>
                <div  class="list-group">
                    <a  class="list-group-item list-group-item-info">
                    <h3 class="list-group-item-heading">配送信息</h3>
                    <p id="addr" class="list-group-item-text"> 收件人： {{vm.order.deliverInfo.contact}} 联系电话： {{vm.order.deliverInfo.tel}} 配送地址： {{vm.order.deliverInfo.addr}}</p>
                    </a>
                </div>
                
            </div>
            
        </div>
        
        <!--菜品列表及相关信息-->
        <div>
                <ul class="list-group">
                    <!--这里是拼得的infolist，不是从scope中取出的-->
                    <li class="list-group-item" ng-repeat="o in vm.infolist">
                        <div class="media">
                            <div class="media-left media-middle">
                            <a href="#">
                                <img width="120px" height="100px"   class="media-object" ng-src="{{o.food.fimg}}">
                            </a>
                            </div>
                            <div class="media-body">
                            <h4 class="media-heading">{{o.food.fname}}</h4>
                            <p><span class="price-type">价格</span><span class="detail-price">×{{o.count}}
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    ￥{{o.food.fprice}}</span></p>
                            
                            </div>
                        </div>  
                    </li>
                </ul>
                <p style="text-align: right; font-size: 20px">共付：<span style="color: red;font-size: 30px">￥{{vm.order.osum}}</span></p>
            </div>
        
        
        <!-- 在商家未接单状态可以取消订单 -->
        <div ng-switch="vm.order.ostate">
            <div id="canceldiv" ng-switch-when="0">
                    <button id="cancelalert" ng-click="vm.openCancelModal()" class="btn btn-warning">取消订单</button>
            </div>
        
            <div id="receivediv" ng-switch-when="3">
                <button id="confirmalert"  ng-click="vm.openReceiveModal()" class="btn btn-danger">确认收货</button>
            </div>
        </div>
        
    
</div>